<template>
    <div class="home">
            <div class="head">
                <p>电商电台</p>
                <p>电商后台管理系统</p>
                <router-link to="/Login" tag="p">退出</router-link>
            </div>
            <div class="content">
                <ul class="list_left">
                        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                            <el-submenu index="1">
                                <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>用户管理</span>
                                </template>
                                <el-menu-item-group class="name">
                                    <el-menu-item index="1-1" @click="menu"><i class="el-icon-menu"></i>用户列表</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                            <el-submenu index="2">
                                <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>权限管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="2-1" @click="role"><i class="el-icon-menu"></i>角色列表</el-menu-item>
                                    <el-menu-item index="2-2" @click="permiss"><i class="el-icon-menu"></i>权限列表</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                            <el-submenu index="3">
                                <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>商品管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="3-1" @click="goods"><i class="el-icon-menu"></i>商品列表</el-menu-item>
                                    <el-menu-item index="3-2" @click="points"><i class="el-icon-menu"></i>分类列表</el-menu-item>
                                    <el-menu-item index="3-3" @click="goodspoints"><i class="el-icon-menu"></i>商品分类</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                            <el-submenu index="4">
                                <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>订单管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="4-1" @click="order"><i class="el-icon-menu"></i>订单列表</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                            <el-submenu index="5">
                                <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>数据统计</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="5-1" @click="report"><i class="el-icon-menu"></i>数据报表</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </el-menu>
                </ul>
                <router-view></router-view>
            </div>
    </div>
</template>

<script>
import { list } from "../api/api.js";
 export default {
    methods: {
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      menu(){
          this.$router.push({
              name:"List"
          })
      },
      role(){
          this.$router.push({
              name:"Role"
          })
      },
      permiss(){
          this.$router.push({
              name:"Permiss"
          })
      },
      goods(){
          this.$router.push({
              name:"Goods"
          })
      },
      points(){
          this.$router.push({
              name:"Class"
          })
      },
      goodspoints(){
          this.$router.push({
              name:"Goodspoints"
          })
      },
      order(){
          this.$router.push({
              name:"Order"
          })
      },
      report(){
          this.$router.push({
              name:"Report"
          })
      }
    },
  }
</script>

<style scoped lang="scss">
    .home{
        width:100%;
        height:100vh;
        display:flex;
        flex-direction: column;
        .head{
            width:100%;
            height:63px;
            background-color:#ccc;
            display:flex;
            justify-content : space-between;
            align-items: center;
            p:nth-of-type(1){
                font-size:32px;
                padding-left:30px;
            }
            p:nth-of-type(2){
                font-size:28px;
                color:white;
            }
            p:nth-of-type(3){
                font-size:15px;
                padding-right:30px;
                color:blue;
            }
        }
        .content{
            background-color:#e4e0e0;
            width:100%;
            display:flex;
            flex:1;
            .list_left{
                width:200px;
                background-color:white;
                display:flex;
                flex-direction: column;
            }
        }
    }
</style>
